<template>
  <div class="boss">
    <h3><slot name="header"></slot></h3>
    <div class="date">
      <div class="date-1">
        <p
          v-for="(item, index) in choose"
          :key="index"
          @click="sele(item, index)"
          :class="a == index ? 'fColor' : ''"
        >
          {{ item }}
        </p>
      </div>
      <div class="block">
        <el-date-picker
          class="block-1"
          v-model="value"
          @blur="blurSele(value)"
          type="daterange"
          format="yyyy/MM/dd"
          value-format="yyyy/MM/dd"
          size="mini"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      value: "",
      choose: ["全部", "今日", "本周", "本月"],
      a: 0,
      key: [],
      type: 0, //控制历史温度的选择,0是全部，1是本日，2是本周，3是本月，4自选
    };
  },
  methods: {
    ...mapMutations("home", ["set1"]),
    sele(item, index) {
      this.a = index;
      let time = new Date();
      if (item == "全部") {
        this.keyW = "";
        this.value = [];
        this.type = 0;
      } else if (item == "今日") {
        this.keyW = [];
        let year = time.getFullYear();
        let month = time.getMonth() + 1;
        let day = time.getDate();
        this.keyW = [`${year}/${month}/${day}`];
        this.value = [this.keyW[0], this.keyW[this.keyW.length - 1]];
        this.type = 1;
      } else if (item == "本周") {
        this.keyW = [];
        let year = time.getFullYear();
        let month = time.getMonth() + 1;
        let day = time.getDate();
        let week = time.getDay();
        week = week == 0 ? 7 : week;

        for (let i = week - 1; i >= 0; i--) {
          var time1 = new Date(year, month - 1, day - i);
          let year1 = time1.getFullYear();
          let month1 = time1.getMonth();
          let day1 = time1.getDate();
          this.keyW.push(`${year1}/${month1 + 1}/${day1}`);
        }
        this.value = [this.keyW[0], this.keyW[this.keyW.length - 1]];
        this.type = 2;
      } else if (item == "本月") {
        this.keyW = [];
        let year = time.getFullYear();
        let month = time.getMonth() + 1;
        let day = time.getDate();
        for (let i = day - 1; i >= 0; i--) {
          this.keyW.push(`${year}/${month}/${day - i}`);
        }
        this.value = [this.keyW[0], this.keyW[this.keyW.length - 1]];
        this.type = 3;
      }
      this.$emit("chartHistoryAChoose", this.keyW, this.type);
    },
    blurSele(value) {
      this.keyW = [];
      let time1 = value[0].split("/");
      let time2 = value[1].split("/");
      let day1 = new Date(time1[0], time1[1] - 1, time1[2]);
      let day2 = new Date(time2[0], time2[1] - 1, time2[2]);
      let num = Number(time1[2]);
      let year = day1.getFullYear();
      let month = day1.getMonth() + 1;
      let day = day1.getDate();
      this.keyW.push(`${year}/${month}/${day}`);
      while (day1.toString() != day2.toString()) {
        num++;
        day1 = new Date(time1[0], time1[1] - 1, num);
        let year = day1.getFullYear();
        let month = day1.getMonth() + 1;
        let day = day1.getDate();
        this.keyW.push(`${year}/${month}/${day}`);
      }
      this.type = 4;

      this.$emit("chartHistoryAChoose", this.keyW, this.type);
    },
  },
};
</script>

<style lang="less" scoped>
.boss {
  // width: 840px;
  height: 53px;
  border-bottom: #e9f1f7 1px solid;
  padding: 20px 24px 0;
  display: flex;
  justify-content: space-between;
  border-radius: 8px 8px 0 0;
  background-color: #fff;
}
h3 {
  font-size: 16px;
  font-weight: 800;
  color: #435475;
}
.date {
  display: flex;
  .date-1 {
    padding-top: 4px;
    display: flex;
    justify-content: space-between;
    width: 133px;
    margin-right: 8px;
    font-size: 12px;
    color: #7d7d7d;
  }
  .block {
    width: 133px;
    height: 19px;
    .block-1 {
      width: 133px;
      height: 19px;
      font-size: 12px;
      /deep/.el-range-input {
        width: 60px;
        margin: -10px;
        padding-top: 2px;
        transform: scale(0.7);
      }
      /deep/.el-range-separator {
        padding: 0;
      }
      /deep/.el-icon-date {
        margin: 0;
        padding: 0;
        line-height: 11px;
        position: absolute;
        top: 2px;
        right: 0;
      }
      /deep/.el-range__close-icon {
        display: none;
      }
      /deep/.el-range-separator {
        line-height: 10px;
      }
      // /deep/.el-range-editor {
      //   padding: 3px 0 !important;
      // }
    }
  }
}
/deep/.fColor {
  color: #4c67fd;
}
</style>